/**
 * 编程式导航：
 *  RouterLink 组件来实现的导航，是声明式导航
 *  在JS逻辑中来控制导航，是编程式导航
 *
 * route 与 router
 *
 *  项目中正确使用上 VueRouter 之后，每一个组件上都可以访问到 $route 与 $router 两个实例属性
 *
 *  ?VueRouter 如何给所有组件增加上这两个属性的?
 *    Vue3: app.config.globalProperties
 *    Vue2: Vue.prototype
 *
 *  $route：当前匹配的路由信息对象，里面有如下的属性：
 *
 *     path:        路由的 pathname 部分
 *     fullPath:    路由的 完整地址 pathname + search + hash
 *     name:        路由的 名字
 *     query:       路由的 search 参数
 *     params:      路由的 动态路由 参数
 *
 *  $router: 路由器实例对象，也就是 createRouter 创建出来的东西，里面提供有一些函数，供我们来实现编程式导航：
 *
 *    push:       追加历史记录的导航
 *    replace:    替换当前记录的导航
 *    go:         根据传递的数字是正数还是负数来决定前进or后退
 *    forward:    前进
 *    back:       后退
 *
 * RouterLink 的 to 属性写法
 *
 *    1. 字符串写法
 *      to="/about"
 *
 *    2. 对象写法
 *      :to="{
 *        path: '/about',
 *        query: {
 *          a: 1,
 *          b: 2
 *        }
 *      }"
 *
 *      /about?a=1&b=2
 *
 *      :to="{
 *        name: 'detail',
 *        params: {
 *          id: 100,
 *          name: 'zs'
 *        },
 *        query: {
 *          a: 1,
 *          b: 2
 *        }
 *      }"
 *
 *      /detail/100/zs?a=1&b=2
 *
 *      PS:
 *        1. params 必须与 name 配合使用
 *        2. RouterLink 的 to 的写法，跟路由器的 push
 *          和 replace 要的参数写法一样
 *
 *
 *
 *
 *
 */

import { createApp } from "vue";
import router from "./router";

import App from "./App.vue";

const app = createApp(App);
// 注册路由器
app.use(router);

app.mount("#app");
